<template>
  <a-card class="display-amount-card">
    <DisplayAmountChart
      v-if="dataIn && dataOut"
      :dataIn="dataIn"
      :dataOut="dataOut"
    />
    <div
      v-else
      class="flex items-center justify-center bg-gray-200"
      style="height: 500px"
    >
      <a-spin />
    </div>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from "vue";
import DisplayAmountChart from "../charts/DisplayAmountChart.vue";
import {
  getDisplayAmountChartIn,
  getDisplayAmountChartOut,
} from "@/controller/Display";
import { DisplayAmountItem } from "model";

export default defineComponent({
  name: "DisplayAmountCard",
  components: {
    DisplayAmountChart,
  },
  setup() {
    const dataIn = ref<Array<DisplayAmountItem>>();
    const dataOut = ref<Array<DisplayAmountItem>>();
    onBeforeMount(async () => {
      dataIn.value = await getDisplayAmountChartIn();
      dataOut.value = await getDisplayAmountChartOut();
    });
    return { dataIn, dataOut };
  },
});
</script>

<style scoped lang="scss"></style>
